<template>
    <div>
        <h1 class="ss">{{ title }}</h1>
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生年龄:{{ age }}</h2>
        <h2>学生性别:{{ sex }}</h2>
        <h2>学生班级:{{ classroom }}</h2>
        <input type="text" ref="nameUp">
        <button @click="updateStudent()">修改</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: 'Student'
        }
    },
    // props:{
    //     name:String,
    //     age:Number,
    //     sex:String,
    //     classroom:String}
    props: {
        name: {
            type: String, // 类型
            default: 'default', // 默认值
            required: true // 是否必传
        },
        age: {
            type: Number,
            default: 0,
            required: true
        },
        sex: {
            type: String,
            default: 'default',
            required: true
        },
        classroom: {
            type: String,
            default: 'default',
            required: true
        }
    },
    methods: {
        updateStudent() {
            console.log(this.$refs.nameUp.value);
            // this.$props.name = this.$refs.nameUp.value;
            this.$emit('updateName', this.$refs.nameUp.value);
        },
        push(){
            // 通过$emit触发父组件的方法
            this.$emit("appxx","信息");
        },
        pushToUser(){
            // 通过$bus触发兄弟组件的方法
            this.$bus.$emit("xxx","xx")
        }
    }
};
</script>

<style  scoped lang="less">
div{
    .ss{
        color: greenyellow;
    }
}
</style>